<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<title>银行卡状态修改</title>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<link rel="stylesheet" th:href="@{/layuiadmin/layui/css/layui.css}" media="all">
<!--	<link rel="stylesheet" th:href="@{/layuiadmin/style/admin.css}" media="all">-->
	<style>
		body {
			margin-left: 50px;
			margin-right: 50px;
		}
	</style>
</head>
<body>

	<script th:src="@{/layuiadmin/layui/layui.js}"></script>

	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
		<legend>修改银行卡状态</legend>
	</fieldset>
	<form class="layui-form layui-form-pane" action="" onsubmit="return false;">
		<div class="layui-form-item">
			<label class="layui-form-label">掩码手机号</label>
			<div class="layui-input-block">
				<input type="text" id="mobile" autocomplete="off" placeholder="请输入掩码手机号：1xx****xxxx" class="layui-input">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">环境</label>
			<div class="layui-input-block">
				<select id="select" lay-filter="env">
					<option value=""></option>
					<option value="QA环境" selected="">QA环境</option>
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">选项</label>
			<div class="layui-input-block">
				<input type="radio" name="status" value="协议支付" title="协议支付" checked="">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">协议支付状态</label>
			<div class="layui-input-block">
				<select id="selectStatus" lay-filter="env">
					<option value=""></option>
					<option value="1" selected="">未开通</option>
					<option value="2" selected="">开通成功</option>
					<option value="3" selected="">开通失败</option>
					<option value="4" selected="">已过期</option>
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<button id="jump" class="layui-btn" lay-filter="demo2">提交</button>
		</div>
	</form>
		<div id="panel" style="background-color: #F2F2F2; color: #0000FF" class="layui-hide">
			<div class="layui-row layui-col-space15">
				<div class="layui-card">
					<div class="layui-card-body" id="result">
					</div>
				</div>
		</div>
		</div>
	</div>
	<script th:src="@{/layuiadmin/layui/layui.js}"></script>
	<script>
		layui.use('form', function(){
			var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功

			//……

			//但是，如果你的HTML是动态生成的，自动渲染就会失效
			//因此你需要在相应的地方，执行下述方法来进行渲染
			form.render();
		});
		layui.use('layer', function(){
			$=layui.jquery;
			$(document).on('click','#jump',function(){
				const mobile = $("#mobile").val();
				const env = $('#select>option:selected').val();
				const status = $('#selectStatus>option:selected').val();
				const operation = $('input:radio:checked').val();
				$.ajax({
					type: 'POST',
					url: '/grape/bank/changeBankStatus', //发送请求
					data: JSON.stringify({"mobile": mobile, "env": env, "operation": operation, 'status': status}),
					dataType : "html",
					contentType:'application/json;charset=UTF-8',
					success: function(data) {
						$("#panel").removeClass("layui-hide");
						$("#result").text(data);
					}
				});
			});
		});

	</script>
</body>
</html>

